<template>
  <!-- 消息模块 -->
  <view class="messages">
    <u-tabs :list="list" lineColor="#2488F5" lineWidth="40" :current="messageActiveIndex" :inactiveStyle="inactiveStyle"
      :activeStyle="{ color: '#2488F5' }" @click="tabsClick"></u-tabs>
    <view class="wrapper-content">
      <template v-if="role == 'wgy'">
        <template v-if="messageActiveIndex == 0">
          <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight" :scroll-top="scrollTop"
            :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
            <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
              <view class="up">
                <view class="lt">
                  <view class="tips">
                    <image :src="baseImgUrl + 'mess-icon2.png'" mode=""></image>
                    <text class="point" v-if="!v.readStatus"></text>
                  </view>
                  通知公告
                </view>
                <view class="creaTime"> {{ v.createTime }} </view>
              </view>
              <view class="md">
                <view class="line-hidden title">{{ v.title }}</view>
                <!-- <view class="desc" v-html="v.content"></view> -->
              </view>
              <view class="down">
                <view class="rt" @click="viewDetails(v)">查看详情></view>
              </view>
            </view>
            <view class="pageBottom" v-if="pageBottom && pageConfig.total >= 4">—— 到底了 ——</view>
          </scroll-view>
        </template>

        <template v-if="messageActiveIndex == 1">
          <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight" :scroll-top="scrollTop"
            :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
            <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
              <view class="up">
                <view class="lt">
                  <view class="tips">
                    <image :src="baseImgUrl + 'mess-icon3.png'" mode=""></image>
                    <text class="point" v-if="!v.readStatus"></text>
                  </view>
                  系统消息
                </view>
                <view class="creaTime"> {{ v.createTime }} </view>
              </view>
              <view class="md">
                <view class="line-hidden title">{{ v.title }}</view>
                <!-- <view class="desc" v-html="v.content"></view> -->
              </view>
              <view class="down">
                <view class="rt" @click="viewDetails(v)">查看详情></view>
              </view>
            </view>
            <view class="pageBottom" v-if="pageBottom && pageConfig.total >= 4">—— 到底了 ——</view>
          </scroll-view>
        </template>
      </template>
      <template v-else>
        <template v-if="messageActiveIndex == 0">
          <scroll-view scroll-y=" true" @scrolltolower="scrollBottom" @scroll="scrollHeight" :scroll-top="scrollTop"
            :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
            <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
              <view class="up">
                <view class="lt">
                  <view class="tips">
                    <image :src="baseImgUrl + 'mess-icon1.png'" mode=""></image>
                    <text class="point" v-if="!v.readStatus"></text>
                  </view>
                  {{ v.remindType_dictText }}
                </view>
                <view class="creaTime"> {{ v.createTime }} </view>
              </view>
              <view class="md">
                <view class="line-hidden title">{{ v.title }}</view>
                <view class="desc" style="white-space: pre-wrap" v-html="v.content"></view>
              </view>
              <view class="down">
                <view class="rt" @click="matterHandle(v)">查看详情></view>
              </view>
            </view>
            <view class="pageBottom" v-if="pageBottom && pageConfig.total >= 4">—— 到底了 ——</view>
          </scroll-view>
        </template>

        <template v-if="messageActiveIndex == 1">
          <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight" :scroll-top="scrollTop"
            :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
            <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
              <view class="up">
                <view class="lt">
                  <view class="tips">
                    <image :src="baseImgUrl + 'mess-icon2.png'" mode=""></image>
                    <text class="point" v-if="!v.readStatus"></text>
                  </view>
                  通知公告
                </view>
                <view class="creaTime"> {{ v.createTime }} </view>
              </view>
              <view class="md">
                <view class="line-hidden title">{{ v.title }}</view>
                <!-- <view class="desc" v-html="v.content"></view> -->
              </view>
              <view class="down">
                <view class="rt" @click="viewDetails(v)">查看详情></view>
              </view>
            </view>
            <view class="pageBottom" v-if="pageBottom && pageConfig.total >= 4">—— 到底了 ——</view>
          </scroll-view>
        </template>

        <template v-if="messageActiveIndex == 2">
          <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight" :scroll-top="scrollTop"
            :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
            <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
              <view class="up">
                <view class="lt">
                  <view class="tips">
                    <image :src="baseImgUrl + 'mess-icon3.png'" mode=""></image>
                    <text class="point" v-if="!v.readStatus"></text>
                  </view>
                  系统消息
                </view>
                <view class="creaTime"> {{ v.createTime }} </view>
              </view>
              <view class="md">
                <view class="line-hidden title">{{ v.title }}</view>
                <!-- <view class="desc" v-html="v.content"></view> -->
              </view>
              <view class="down">
                <view class="rt" @click="viewDetails(v)">查看详情></view>
              </view>
            </view>
            <view class="pageBottom" v-if="pageBottom && pageConfig.total >= 4">—— 到底了 ——</view>
          </scroll-view>
        </template>
      </template>
      <view v-if="!dataSource.length" style="margin-top: 5vh">
        <u-empty mode="list" text="暂无数据" :icon="baseImgUrl + 'no-icon2.png'">
        </u-empty>
      </view>
    </view>
    <custom-tab-bar :tabBarIndex="1" ref="tabRef" :badge="unreadMessageCount" />
  </view>
</template>

<script>
  import {
    getUnreadSum
  } from "../../api/api";
  import {
    messageList,
    importantReminder,
    importantReminderDetail,
  } from "@/api/messages.js";
  import mixin from "@/utils/mixin.js";
  import {
    handleClickRouter,
    isLoading,
    navTo,
    whetherLogin
  } from "@/utils/util.js";
  import {
    mapState
  } from 'vuex'

  export default {
    mixins: [mixin],
    data() {
      let role = uni.getStorageSync('role')
      return {
        token: "",
        baseImgUrl: this.$baseImgUrl,
        tabBarIndex: 2,
        scrollTop: 0,
        list: [{
            name: "重要提醒",
            badge: {
              isDot: false,
            },
          },
          {
            name: "通知公告",
            badge: {
              isDot: false,
            },
          },
          {
            name: "系统消息",
            badge: {
              isDot: false,
            },
          },
        ],
        dataSource: [],
        pageBottom: false,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        role,
      };
    },
    computed: {
      ...mapState(['messageActiveIndex', 'unreadMessageCount'])
    },
    onLoad() {
      // 网格员不要重要提醒
      if (['wgy'].includes(this.role)) {
        this.list = this.list.filter(item => item.name !== '重要提醒')
      }
    },
    onShow() {
      this.token = wx.getStorageSync("X-MINI-TOKEN");
      if (!this.token) {
        whetherLogin();
        return;
      }
      this.tabsClick({
        index: this.messageActiveIndex
      });
      this.getMessageCount()
    },
    methods: {
      handleClickRouter,
      removeTop() {
        this.scrollTop = 0;
        uni.removeStorage("scrollTop");
      },
      tabsClick(item) {
        console.log(item)
        if (!this.token) {
          whetherLogin();
          return;
        }
        this.$store.commit('SET_MESSAGE_ACTIVE_INDEX', item.index)
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
        this.removeTop();
      },
      scrollHeight(e) {
        uni.setStorageSync("scrollTop", e.detail.scrollTop);
      },
      scrollBottom() {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) {
          this.getList();
        } else {
          this.pageBottom = true;
        }
      },
      dataLoop(v) {
        this.dataSource.forEach((item, i) => {
          if (item.id == v.id) {
            this.dataSource[i].readStatus = 1;
          }
        });
      },
      matterHandle(v) {
        this.dataLoop(v);


        // checkResult：   检查结果 0.未检查   1.合格   2.不合格
        // 7：审核结果   8：检查结果   9：复查结果   10：逾期提醒  11 12 13
        if ([11, 12, 13].includes(v.remindType)) {
          navTo({
            url: '/wristWatch/messagePrompt',
            params: v
          })
        } else {
          // 点了就标记已读了
          importantReminderDetail({
            id: v.id
          }).then((res) => {});
        }
        if (v.remindType == 7) {
          uni.navigateTo({
            url: `/selfInfo/myBusiness/businessDetails?id=${v.bizId}&homeon=1&isCompanyType=${v.isCompanyType+''}&source=importantReminder`,
          });
        } else if (v.remindType == 8) {
          if (v.checkResult == 1) {
            // 合格
            uni.navigateTo({
              url: `/goOverBag/goPass/goPass?taskId=${v.taskId}`,
            });
            return;
          }

          //不合格
          uni.navigateTo({
            url: `/goOverBag/belowtheMark/nonGoover?taskId=${v.taskId}&&reviewFlag=0`,
          });
        } else if (v.remindType == 9 || v.remindType == 5) {
          if (v.checkResult == 1) {
            // 合格
            uni.navigateTo({
              url: `/keepArecord/recordPass/recordPass?taskId=${v.taskId}`,
            });
            return;
          }

          //不合格
          uni.navigateTo({
            url: `/keepArecord/nonRecord/nonRecord?taskId=${v.taskId}&&reviewFlag=0`,
          });
        } else if (v.remindType == 10) {
          // checkType 1.检查单 2.复查单
          if (v.checkType == 1) {
            uni.navigateTo({
              url: `/goOverBag/belowtheMark/nonGoover?taskId=${v.taskId}`,
            });
            return;
          }

          uni.navigateTo({
            url: `/keepArecord/nonRecord/nonRecord?taskId=${v.taskId}`,
          });
        }
      },
      viewDetails(v) {
        this.dataLoop(v);
        console.log('hihii')
        uni.navigateTo({
          url: `/pages/messages/messagesDetail?id=${v.id}&noticeType=${this.messageActiveIndex}`,
        });
      },
      getList() {
        let messageActiveIndex = this.messageActiveIndex
        if (['wgy'].includes(this.role)) {
          messageActiveIndex += 1
        }
        if (messageActiveIndex == 0) {
          let data = {
            pageNo: this.pageConfig.pageNo,
            pageSize: this.pageConfig.pageSize,
          };
          isLoading(true)
          importantReminder(data).then((res) => {
            this.dataSource = this.dataSource.concat(res.result.records || []);
            this.pageConfig.total = res.result.total;
          }).finally(() => {
            isLoading(false)
          })
        } else {
          let data = {
            noticeType: messageActiveIndex,
            pageNo: this.pageConfig.pageNo,
            pageSize: this.pageConfig.pageSize,
          };
          isLoading(true)
          messageList(data).then((res) => {
            this.dataSource = this.dataSource.concat(res.result.records || []);
            this.pageConfig.total = res.result.total;
          }).finally(() => {
            isLoading(false)
          })
        }
      },
      getMessageCount() {
        getUnreadSum().then((res) => {
          if (res.code === 200) {
            this.$store.commit('SET_UNREAD_MESSAGE_COUNT', res.result.countSum)
          }
        });
      },
    },
  };
</script>

<style lang="scss">
  .messages {
    height: 100%;

    .wrapper-content {
      background: #f8f9fb;
      height: calc(100% - 94px);
      padding: 24rpx 16rpx;

      .wrapper-item {
        padding: 30rpx;
        background-color: #ffffff;
        margin-bottom: 20rpx;

        .up {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 20rpx;
          border-bottom: 1rpx solid #e4e4e4;

          .lt {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;

            .tips {
              position: relative;
              top: 0;
              left: 0;
              width: 40rpx;
              height: 42rpx;
              margin-right: 10rpx;

              image {
                width: 100%;
                height: 100%;
              }

              text {
                position: absolute;
                top: 0;
                right: -1px;
                width: 14rpx;
                height: 14rpx;
                background: #f33030;
                border-radius: 50%;
              }
            }
          }

          .creaTime {
            color: #a1a1a1;
            font-size: 28rpx;
            font-weight: 400;
          }
        }

        .md {
          padding: 28rpx 0;

          // border-bottom: 1rpx solid #e4e4e4;
          .title {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-bottom: 28rpx;
          }

          .desc {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #a1a1a1;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .down {
          padding-top: 20rpx;
          text-align: right;

          .rt {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }
  }
</style>